<template>
  <div class="BContainer">
    <Header></Header>
    <div class="block">

      <el-timeline>
        <el-timeline-item v-for="blog in blogs" :key="blog" :timestamp="blog.created" placement="top">

          <el-card>
            <el-image class="BContent_card_img"
                      style="width: 100px; height: 100px"
                      :src="blog.status">
            </el-image>
            <router-link class="BContent" :to="{name:'BlogDetail',params:{blogId:blog.id}}">
              <div class="BContent_card_C">
                <h4>
                  {{ blog.title }}
                </h4>
                <p>{{ blog.description }}</p>
              </div>
            </router-link>
          </el-card>

        </el-timeline-item>
      </el-timeline>

      <el-pagination class="BPage"
                     background
                     layout="prev, pager, next"
                     :current-page="currentPage"
                     :page-size="pageSize"
                     :total="total"
                     @current-change="page">
      </el-pagination>
    </div>
    <Footer></Footer>
  </div>

</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";

export default {
  name: "Blogs.vue",
  components: {Footer, Header},
  data() {
    return {
      blogs: {},
      currentPage: 1,
      total: 0,
      pageSize: 5,
    }
  },
  methods: {
    page(currentPage) {
      const _this = this
      _this.$axios.get("/blogs?currentPage=" + currentPage).then(res => {
        console.log(res)
        _this.blogs = res.data.data.records
        _this.currentPage = res.data.data.current
        _this.total = res.data.data.total
        _this.pageSize = res.data.data.size

      })
    }
  },
  created() {
    this.page(1)
  },

}
</script>

<style scoped>
.BContent {
  text-decoration: none;
  color: black;
}

.BContent_card_C h4, .BContent_card_C p {
  text-align: center;
}

.BContent_card_img {
  position: absolute;
  opacity: 0.5;
  right: 10px;
}

.BContent_card_C:hover {
  box-shadow: 0 2px 12px 0 rgba(83, 225, 255, 0.85);
}

@media (max-width: 900px) {
  .BContent_card_img {
    display: none;
  }

  .BContent_card_C {
    max-width: 800px;
    border-radius: 20px;
  }
}

@media (min-width: 900px) {
  .BContent_card_C {
    max-width: 650px;
    border-radius: 10px;
  }
}


.BPage {
  margin: 0 0 15px auto;
  text-align: center;
}


</style>